<template>
  <view style="display: inline-block;">
    <u-modal
      v-model="show"
      title="详细信息"
      width="90%"
      :show-cancel-button="false"
      confirm-text="关闭"
    >
      <view class="slot-content">
        <div class="descriptions-item" v-for="(item,index) in detailList" :key="index">
          <div class="descriptions-item-label" style="word-break: break-all;">{{ item.label }}</div>
          <div class="descriptions-item-value" style="word-break: break-all;">{{ item.value }}</div>
        </div>
      </view>
    </u-modal>
    <u-button size="mini" type="primary" @click="open"> <slot>详细信息</slot> </u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  props: {
    relatedKey: {
      type: Object,
      default: () => {
        return {};
      },
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    }
  },
  methods: {
    open() {
      this.show = true;
    },
  },
  computed: {
    detailList() {
      const list = []
      for(var k in this.relatedKey) {
        const label = this.relatedKey[k]
        const temp = {
          label: label,
          value: this.data[k]
        }
        list.push(temp)
      }
      return list
    }
  }
};
</script>
<style lang="scss" scoped>
.slot-content {
  font-size: 28rpx;
  max-height: 70vh;
  overflow-y: auto;
  padding: 20rpx;
}
.descriptions-item {
  display: flex;
  justify-content: flex-start;
  line-height: 32rpx;
  
  .descriptions-item-label {
    width: 200rpx;
    text-align: center;
    border: 1rpx solid #eee;
    padding: 16rpx 10rpx;
    font-weight: 600;
  }
  .descriptions-item-value {
    flex: 1;
    text-align: center;
    border: 1rpx solid #eee;
    padding: 16rpx 10rpx;
  }
}
</style>
